<template>
	<div class="el-box">
		<TopNav></TopNav>
		<div class="el-body-box">
			<el-main class="el-main">
				<!--课程详情 start-->
				<div class="curriculum">
					<div class="cover">
						<el-image :src="'http://111.85.220.186:1315'+shopDetails.commodityImgurl"></el-image>
					</div>
					<div class="curriculumDeleteil">
						<h2>{{shopDetails.commodityName}}</h2>
						<p v-if="shopDetails.beOverdue == 1">服务类型：免费</p>
						<p v-if="shopDetails.beOverdue == 2">服务类型：包月</p>
						<p v-if="shopDetails.beOverdue == 3">服务类型：包年</p>
						<div class="price">
							&yen;<label>{{shopDetails.price}}</label>
						</div>
						<div class="btns">
							<el-input-number size="small" v-model="num" @change="handleChange" :min="1" :max="10">
							</el-input-number>
							<el-button size="small" type="warning" plain style="margin-left: 10px;"
								@click="onTrial=true">7天试用</el-button>
							<el-button size="small" type="primary" style="margin-left: 30px;" @click="handleBuyNow">立即购买</el-button>
							<el-button size="small" type="primary" plain @click="handleAddCart">加入购物车</el-button>
						</div>
						<div class="collection" @click="handleCollection">
							<i v-if="shopDetails.flag == 1" class="iconfont iconfavorites-fill" style="color:red;"></i>
							<i v-else class="iconfont iconfavorites"></i>
							<label>收藏</label>
						</div>
					</div>
				</div>
				<!--课程详情 end-->

				<!--信息/评论 切换 start-->
				<div class="tabWrap">
					<el-radio-group v-model="radio" @change="handleTabChange">
						<el-radio-button :label="1">基本信息</el-radio-button>
						<el-radio-button :label="2">评论</el-radio-button>
					</el-radio-group>
				</div>
				<!--信息/评论 切换 end-->

				<!--基本信息  start-->
				<div class="basic" v-if="radio == 1">
					<h2>一</h2>
					<p v-html="shopDetails.content">

					</p>
					<div class="imgDetails">

					</div>
				</div>
				<!--基本信息  end-->

				<!--评论  start-->
				<div class="comment" v-if="radio == 2">
					<div class="commentType">
						<el-radio-group v-model="commentType" @change="handleSort">
							<el-radio label="">全部</el-radio>
							<el-radio :label="3">好评</el-radio>
							<el-radio :label="2">中评</el-radio>
							<el-radio :label="1">差评</el-radio>
						</el-radio-group>
					</div>

					<div class="commentContent" >
						<div class="list" v-if="CommentList.length>0" v-for="item in CommentList" :key="item.id">
							<div class="avatar">
								<el-avatar :size="50" :src="item.userPhoto" @error="errorHandler">
									<img :src="item.userPhoto?BaseUrl + item.userPhoto:src" />
								</el-avatar>
								<label>{{item.userName}}</label>
							</div>
							<div class="contentPL">
								<div class="star">
									<label>评论：</label>
									<i class="el-icon-star-on" v-for="index in item.commentGrade" :key="index"></i>
								</div>
								<p>
									{{item.commentContent}}
									<!--2006夏天我拿着中考成绩单,狂奔向还在田边插秧的父母,告诉他们我考上重点高中了,父亲把秧苗一扔,走!回家吃饭去-->
								</p>
							</div>
							<div class="time">
								<span>{{item.createTime}}</span>
							</div>
						</div>
					</div>

					<!--分页-->
					<div class="block" v-if="CommentList.length>0">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							:current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
				<!--评论  end-->

			</el-main>
		</div>

		<!--加入购物车提示  start-->
		<transition name="el-fade-in-linear">
			<div class="addCart" v-show="addTips">
				<div class="close">
					<i class="el-icon-close" @click="addTips = false"></i>
				</div>
				<div class="scuss">
					<i class="el-icon-success"></i>
					<label>成功加入购物车！</label>
				</div>
				<p>
					您可以去<el-button type="text" style="margin:0 3px;" @click="$router.push({path:'/cart'})">购物车</el-button>结算，或者购买点其他的！
				</p>
			</div>
		</transition>
		<!--加入购物车提示  end-->

		<!--7天试用弹框  start-->
		<el-dialog title="申请使用" :visible.sync="onTrial" width="450px">
			<el-form label-position="right" :rules="rules" label-width="65px" ref="dialogForm" :model="dialogForm">
				<el-form-item label="姓名" prop="name">
					<el-input placeholder="请输入姓名" v-model="dialogForm.name" :clearable="true"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input placeholder="请输入手机号" v-model="dialogForm.phone" :clearable="true"></el-input>
				</el-form-item>
				<el-form-item label="验证码" style="text-align: left;" prop="phoneCode">
					<el-input placeholder="请输入验证码" v-model="dialogForm.phoneCode" :clearable="true"
						style="width:212px; margin-right: 20px;" ></el-input>
					<el-button size="medium" type="primary">获取验证码</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="medium" type="primary" @click="handleOnTrialSubmit">确 定</el-button>
				<el-button size="medium" @click="handleOnTrialCancel" style="margin-left: 40px;">取 消</el-button>
			</span>
		</el-dialog>
		<!--7天试用弹框  end-->
	</div>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<!-- 只在当前页面起作用 -->
<!-- <style lang="scss" scoped src="./index.scoped.scss"></style> -->
<!-- 全面页面起作用，先不作推荐 -->
